import React, { useEffect, Suspense } from 'react'
import { BrowserRouter } from 'react-router-dom'

import './assets/styles/App.scss'
// 全局样式
import './assets/styles/global.scss'

// AOS 过渡动画库
import Aos from 'aos'
import 'aos/dist/aos.css'

// 顶部导航
import Navbar from './component/Navbar'
// 顶部导航
import Music from './component/music/music'

import View from './views/View'

import UA from 'ua-parser-js'

import storage from './utils/storage'

import { GetUserAddress } from './api/user'

import { insertRecord } from './api/Access'

const App = () => {
  const init = async () => {
    const { result } = await (GetUserAddress() as any)
    storage.set('UA', new UA().getResult())
    storage.set('Address', result)
  }

  useEffect(() => {
    init().finally(() => {
      insertRecord({
        UA: storage.get('UA'),
        Address: storage.get('Address'),
      })
    })
    Aos.init()
  }, [])
  return (
    <div className="App">
      <BrowserRouter>
        <Navbar />
        <Suspense fallback={null}>
          <View />
        </Suspense>
        {/* <Music /> */}
      </BrowserRouter>
    </div>
  )
}

export default App
